<!-- 
 * input限制数字
 * @author: 
 * @since: 2022-05-06
 * index.vue
-->
<template>
  <div class="input-container">
    <el-input v-model="model" :placeholder="placeholder" clearable @input="input" :maxlength="maxLength" />
    <div class="tip">
      <div class="text">最大长度64个字符，允许中文、英文字母、数字或特殊符号</div>
      <div class="num">{{ word }}/{{ maxLength }}</div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits } from "vue";
const props = defineProps({
  model: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
  },
  maxLength: {
    type: Number
  },
})

const emit = defineEmits(['inputEvent',]);

const word = ref(0)

const input = (text) => {
  word.value = text.length
  emit('inputEvent', text);
}


</script>

<style lang="scss" scoped>
.input-container {
  width: 100%;
}
.tip {
  display: flex;
  color: #999999;
  font-size: 12px;
  .text {
    flex: 1;
  }
  .num {
    justify-content: flex-end;
  }
}
</style>
